<template>
  <div class="myprofie">
    <div class="shadow-img slide-bck-bottom">
      <p class="nowrap"><span class="yellow">Welcome To</span>My Profile</p>
    </div>
    <div class="description slide-bck-top">
      <div class="strong-text nowrap">
        Hello, I am
        <span>金 鑫</span>
      </div>
      <div class="focus-text nowrap">Web Developer & Web Designer</div>
      <p class="large-paragraph">
        I have ten years experience as a web/interface designer.I have a love of
        clean, elegant styling. I have lots of experience in the production of
        CSS and HTML for modern websites.
      </p>
      <div class="bk-icon" ref="bkIcon"></div>
      <p class="personal-info-title nowrap">Personal Info</p>
      <ul class="personal-info" ref="info">
        <li
          class="rotate-out"
          v-for="(item, index) in personalInfo"
          :key="index"
        >
          <label for="" ref="infolable">{{ index }}</label>
          <span ref="infolable">{{ item }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "myprofie",
  data() {
    return {
      personalInfo: {
        Name: "Anderson smith",
        Address: "Melbourne Victoria 3000 Australia",
        Email: "nurealamsabbir@authlab.io",
        Phone: "+8801979791001",
      },
    };
  },
  mounted() {
    console.dir(this.$refs.bkIcon);

    window.addEventListener("scroll", () => {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop; //滚动条距离顶部的高度
      let scrollHeight = this.$refs.info.offsetTop; //当前页面的总高度
      let clientHeight = document.documentElement.clientHeight; //当前可视的页面高度
      if (scrollTop + clientHeight >= scrollHeight + 20) {
        //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
        // console.log(this.$refs.infolable);
        for (let index = 0; index < this.$refs.infolable.length; index++) {
          const element = this.$refs.infolable[index];
          element.classList.add("scale-up-ver-center");
        }
      }
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shadow-img {
  width: 100%;
  margin: 0 auto;
  height: 8.125rem;
  background-color: #111111;
  border-radius: 0.3125rem;
  margin-top: 0.625rem;
  font-size: 1.5625rem;
  color: #ffffff;
  position: relative;
}
.shadow-img p {
  position: absolute;
  bottom: 1.25rem;
}
.shadow-img p span.yellow {
  color: #f4d03f;
  margin-right: 0.625rem;
  margin-left: 0.625rem;
}

.slide-bck-bottom {
  animation: slide-bck-bottom 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation-delay: 0.4s;
}
.slide-bck-top {
  animation: slide-bck-top 0.6s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  animation-delay: 0.4s;
}
.description {
  width: 100%;
  background-color: #ffffff;
  padding: 0.9375rem 1.875rem;
  border-radius: 0.3125rem;
  margin: 0 auto;
  margin-top: 0.625rem;
  position: relative;
  margin-bottom: 1.25rem;
}
.description .strong-text {
  font-size: 1.40625rem;
  font-weight: bold;
  margin: .625rem 0px;
}
.description .strong-text span {
  background-color: #f4d03f;
  padding: 0.1875rem .3125rem;
}
.description .focus-text {
  font-size: 1rem;
  font-weight: 600;
  color: #666;
}
.description .large-paragraph {
  margin: .9375rem 0px;
  padding-right: 4.6875rem;
  font-size: .875rem;
  line-height: 1.7em;
  letter-spacing: 0.02em;
  color: #666;
}
.description .bk-icon {
  width: 20.0625rem;
  height: 21.4375rem;
  position: absolute;
  bottom: 0px;
  right: 0.9375rem;
  background: url("../assets/profile.jpg") no-repeat;
  background-size: contain;
  background-position: right;
}
.description .personal-info-title {
  font-size: 1.3125rem;
  margin-top: 4.0625rem;
  margin-bottom: 1.25rem;
}
.description .personal-info li {
  margin-bottom: 0.5625rem;
  padding-left: 4.6875rem;
  position: relative;
  font-size: 0.78125rem;
}
.personal-info label {
  position: absolute;
  left: 0;
  width: 4.6875rem;
  top: 0;
  bottom: 0;
  min-width: 4.6875rem;
  font-size: 0.78125rem;
  font-weight: 600;
  background: #f4d03f;
  margin-right: 0.625rem;
  padding: 0.25rem 0.625rem 0.3125rem;
  margin: 0;
}
.personal-info span {
  background: #111111;
  padding: 0.25rem 0.625rem 0.3125rem;
  color: #fff;
  display: inline-block;
  margin-left: 0.5625rem;
  text-transform: capitalize;
}
.flip-horizontal-bottom {
  animation: flip-horizontal-bottom 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    both;
  animation-delay: 1s;
}
.scale-up-ver-center {
  animation: scale-up-ver-center 0.9s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation-delay: 1s;
}
@keyframes slide-bck-bottom {
  0% {
    opacity: 0;
    transform: translateZ(400px) translateY(-200px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateY(0);
  }
}

@keyframes slide-bck-top {
  0% {
    opacity: 0;
    transform: translateZ(400px) translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) translateY(0);
  }
}
@keyframes scale-up-ver-center {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
  50% {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
  100% {
    -webkit-transform: rotateX(-360deg);
    transform: rotateX(-360deg);
  }
}
</style>
